<template>
  <QuarterPicker
    v-if="props.dateType === 'quarter'"
    v-model="defaultValue"
    @change="datePickerChange"
  ></QuarterPicker>
  <el-date-picker
    :clearable="props.dateType === 'daterange'"
    v-model="defaultValue"
    v-if="props.dateType !== 'quarter'"
    value-format="YYYY-MM-DD"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="请选择"
    :type="props.dateType"
    :disabled-date="getDisabledStatus"
    :format="getCurrentFormat(props.dateType)"
    @change="datePickerChange"
    @calendar-change="dateCalendarChange"
    class="!w-250px"
  />
</template>
<script lang="ts" name="DatePicker" setup>
import { getDaysInMonth } from '@/utils/common'
import { formatDate } from '@/utils/formatTime'
import { getCurrentTimeStamp } from '@/utils/common'

const emit = defineEmits(['update:modelValue', 'dataChange'])
const defaultValue = ref()
let currentTime: any = null
const numExchange = {
  一: 1,
  二: 2,
  三: 3,
  四: 4
}
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  dateType: {
    type: String,
    default: 'month'
  },
  isNow: {
    type: Boolean,
    default: true
  }
})

watch(
  () => props.dateType,
  (value) => {
    currentTime = null
    switch (value) {
      case 'daterange':
        defaultValue.value = []
        break
      case 'quarter':
        defaultValue.value = ''
        break
      default:
        defaultValue.value = ''
        break
    }
  }
)

watch(
  () => props.modelValue,
  (value) => {
    switch (value) {
      case 'daterange':
        defaultValue.value = value
        break
      default:
        defaultValue.value = value
        break
    }
  }
)

const datePickerChange = ($event) => {
  let dateRange: string[] = []
  switch (props.dateType) {
    case 'daterange':
      if ($event?.length) {
        dateRange = [$event[0], $event[1]]
      } else {
        currentTime = null
      }
      break
    case 'week':
      if ($event) {
        const timeStamp = 6 * 24 * 60 * 60 * 1000
        const endStamp = new Date(new Date($event).getTime() + timeStamp)
        const endDate = formatDate(endStamp, 'YYYY-MM-DD')
        dateRange = [$event, endDate]
      }
      break
    case 'month':
      if ($event) {
        const year = new Date($event).getFullYear()
        const month = new Date($event).getMonth()
        const day = getDaysInMonth(year, month + 1)
        const timeStamp = (day - 1) * 24 * 60 * 60 * 1000
        const endStamp = new Date(new Date($event).getTime() + timeStamp)
        const endDate = formatDate(endStamp, 'YYYY-MM-DD')
        dateRange = [$event, endDate]
      }
      break
    case 'quarter':
      if ($event) {
        dateRange = quarterTextExchange($event)
      }
      break
    case 'year':
      if ($event) {
        const timeStamp = 364 * 24 * 60 * 60 * 1000
        const endStamp = new Date(new Date($event).getTime() + timeStamp)
        const endDate = formatDate(endStamp, 'YYYY-MM-DD')
        dateRange = [$event, endDate]
      }
      break
    default:
      break
  }
  emit('dataChange', dateRange)
}

const quarterTextExchange = (text) => {
  if (!text) return []
  let startMonth = '0'
  let endMonth = '0'
  const year = text.split('-')[0]
  const numList = Object.keys(numExchange)
  for (let i = 0; i < numList.length; i++) {
    const data = numList[i]
    if (text.includes(data)) {
      startMonth = (numExchange[data] + 2 * (numExchange[data] - 1)).toString()
      endMonth = (Number(startMonth) + 2).toString()
      if (startMonth.length === 1) {
        startMonth = `0${startMonth}`
      }
      if (endMonth.length === 1) {
        endMonth = `0${endMonth}`
      }
      break
    }
  }
  if (startMonth === '0' || endMonth === '0') return []
  return [`${year}-${startMonth}-01`, `${year}-${endMonth}-${getDays(endMonth)}`]
}

const getDays = (month) => {
  const dayObj = {
    3: 31,
    6: 30,
    9: 30,
    12: 31
  }
  return dayObj[Number(month)]
}

const getCurrentFormat = (type) => {
  let formatter = ''
  switch (type) {
    case 'daterange':
      formatter = 'YYYY-MM-DD'
      break
    case 'week':
      formatter = '第ww周'
      break
    case 'month':
      formatter = 'YYYY-MM'
      break
    case 'year':
      formatter = 'YYYY'
      break
    default:
      break
  }
  return formatter
}

const dateCalendarChange = (date) => {
  if (props.dateType === 'daterange') {
    currentTime = date[0]
  }
}

const getDisabledStatus = (date) => {
  let flag = false
  switch (props.dateType) {
    case 'daterange':
      if (!currentTime) {
        if (props.isNow) {
          flag = date.getTime() > Date.now()
        } else {
          flag = date.getTime() > Date.now() - getCurrentTimeStamp()
        }
      }
      if (currentTime) {
        const twoMonthStamp = 60 * 24 * 60 * 60 * 1000
        const currentStamp = currentTime.getTime()
        const minTime = currentStamp - twoMonthStamp
        const maxTime = currentStamp + twoMonthStamp
        if (props.isNow) {
          flag =
            date.getTime() > Date.now() || date.getTime() <= minTime || date.getTime() >= maxTime
        } else {
          flag =
            date.getTime() > Date.now() - getCurrentTimeStamp() ||
            date.getTime() < minTime ||
            date.getTime() > maxTime
        }
      }
      break
    default:
      if (props.isNow) {
        flag = date.getTime() > Date.now()
      } else {
        flag = date.getTime() > Date.now() - getCurrentTimeStamp()
      }
      break
  }
  return flag
}

onMounted(() => {
  defaultValue.value = props.modelValue
})
</script>
